<!DOCTYPE html>
<html>
<head>
  <title>基础配置</title>
</head>
<style type="text/css">
  .flex{
    height: 100vh;
    display: flex;
    width: 100vw;
    flex-direction: column;
  }
  body{
    margin: 0;
    padding: 0;
    background: #409EFF;
  }
 .column{
    flex-direction:column;
  }
 .row{
    flex-direction:row;
  }
  .center{
    justify-content: center;
    align-items: center;
  }
  .flex .item{
    flex:1;
  }
  label{
    padding-left: 5px;
    padding-right: 5px;
  }
  .li{
    justify-content: center;
    display: flex;
    height: auto;
    /*background: #FFFFFF;*/
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
  }
  .ul .tip{
    font-size:0.7em;
    background: rgba(225,225,225,1);
  }
  .ul{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    height: auto;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    box-sizing: border-box;
    background: #E4E7ED;
  }
  .li .item:first-child{
    text-align: right;
  }
   .li .item:nth-child(2){
    text-align: left;
  }
  .ul .title{
    top: 0;
    /*position: absolute;*/
    background: #606266;color: #fff
  }
  div{
    line-height: 2em;
    height: 2em;
  }
  input{
    line-height: 1.7em;
    height: 1.7em;
  }
  button{
    width: 25%;
    font-size: 0.7em;
    /*padding: 5px;*/
    line-height: 3.2em;
    height: 3.5em;
    background: #FFFFFF;
    border-radius: 5px;
  }
  button:hover{
    /*background: #409EFF;*/
    opacity: 0.5;
  }

  .loading{
    border-top:20px solid #387cff;
    border-bottom:20px solid #387cff; 
    border-left:20px solid #387cff; 
    border-right:20px solid rgba(255,255,255,1);
    border-radius: 50%; 
    animation: loading 2s infinite;
  }
  @keyframes loading{
   0%{
     transform: rotate(0deg);
     }
    100%{
     transform: rotate(360deg);
     }
 }
</style>
<script type="text/javascript">
    var masking={
        id:"masking_ing_fdsadsaf"
        ,open(content){
        //创建一个div
        var div = document.createElement('div');
        var content=content||"<div id='loading' class='loading' style='display:flex;height: 100px;width: 100px;background: rgba(0,0,0,0);' ></div>";
        div.id=this.id;
        div.class="flex column center";
        div.style="position: absolute;z-index: 999;display:flex;background:rgba(0,0,0,0.5); top:0;height:100vh;width:100vw;justify-content:center;align-items:center";
        div.innerHTML ="<div id='"+this.id+"_x' style='position:absolute;right:10px;top:5px' >✖</div>"+content;
        var bo = document.body;//获取body对象.
        bo.style="position:relative;margin:0;padding:0";
        //动态插入到body中
        bo.insertBefore(div,bo.lastChild);

        document.getElementById(this.id+'_x').addEventListener("click",(e)=>{
        this.close(0);
      },false);
    },close(){
      document.body.removeChild(document.getElementById(this.id))
    }
  }
  //使用方法 message.confirm(标题,内容,[{text,function}](按键文字和回调函数))
  var message={
      id:"message_alert_adbcdifds"
    ,confirm(title='',content='',arr=[{text:'确认',function(){}}]){
      var that=this;
      var div = document.createElement('div');
      div.id=this.id;
      div.class="flex column center";
      div.style="position: absolute;z-index: 9999;display:flex;background:rgba(0,0,0,0.5); top:0;height:100vh;width:100vw;justify-content:center;align-items:center";
      var button='';
      for (let i =0;i< arr.length; i++) {
        arr[i].text=arr[i].text||"";
        button+="<button>"+arr[i].text+"</button>";
      }
      var html="<div style='display:flex;position:relative; box-sizing:border-box;padding:10px 20px 10px 20px;justify-content:space-between;flex-direction:column;max-width:600px;min-width:400px;min-height:150px;height:auto;background:#f9f9f9;border-radius:5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)'><div id='"+this.id+"_x' style='position:absolute;right:10px;top:5px' >✖</div> <div style='font-size:1.2em;display:flex;justify-content:center;font-weight:bold;'>"+title+"</div><div style='display:flex;justify-content:center;width: 100%;height:auto;'>"+content+"</div><div class='li' style='justify-content: flex-end;flex-wrap: wrap;'>"+button+"</div></div>"; //设置显示的数据，可以是标签．
      div.innerHTML =html;
      var bo = document.body;//获取body对象.
      bo.style="position:relative;margin:0;padding:0";
      //动态插入到body中
      bo.insertBefore(div,bo.lastChild);
      for (let i =0;i< arr.length; i++) {
        arr[i].callback=arr[i].callback || function (e) {
        };
        var but= div.getElementsByTagName('button')[i];

        but.addEventListener("click",(e)=>{
            arr[i].callback(arr[i]);
            this.close(i);
        },false);
      }
      document.getElementById(this.id+'_x').addEventListener("click",(e)=>{
        this.close(0);
      },false);
    },close:function(e){
      document.body.removeChild(document.getElementById(this.id))
      return e;
    }
  }
  function callback(e){
    alert(e);
  }
</script>
<body>
<!-- <div id="masking" class="flex column center" style="position: absolute;z-index: 999;display:none;">
      <div id="loading" class="loading" style="display:none;height: 100px;width: 100px;background: rgba(0,0,0,0);">
      </div>
</div> -->
<div class="flex column center" id="content">
    <div  id="confirm" class="ul flex column center"  style="background: #fff;display: none">
      <h3>提示</h3>
      <div id="tishi" style="width: 100%;height:100px;" class=" column center">
       本次操作将会重新配置数据库地址/端口/库名/前缀名/用户名/密码相关信息。配置后立即生效。
      </div>
      <div class="li" style="justify-content: flex-end;flex-wrap: wrap;">
        <button onclick="show(1)">确认</button>
        <button onclick="show(0)">取消</button>
      </div>
    </div>

  <div id="form" class="ul flex column center">
      <div class="li title"  onclick="masking.open()">
        {$data.model['title']}数据库配置
      </div>
      <div class="ul" id="db">
        <div class="li">
          <label class="item">数据库地址</label>
          <input class="item" type="" name="hostname" value="{$data.db.hostname|default='127.0.0.1'}" />
        </div>

        <div class="li">
          <label class="item">数据库端口</label>
          <input class="item" type="" name="hostport" value="{$data.db.hostport|default='3306'}">
        </div>
        <div class="li">
          <label class="item">数据库名</label>
          <input  class="item" type="" name="database" value="{$data.db.database|default='admin'}">
        </div>
        <div class="li">
          <label class="item">数据表前缀</label>
          <input  class="item" type="" name="prefix" value="{$data.db.prefix|default=''}">
        </div>
        <div class="li">
          <label class="item" >数据库用户名</label>
          <input class="item" type="" name="username" value="{$data.db.username|default='root'}">
        </div>
        <div class="li">
          <label class="item">数据库密码</label>
          <input  class="item" type="" name="password" value="{$data.db.password|default=''}">
        </div>
      </div>
      
      <div class="li" style="justify-content: flex-end;flex-wrap: wrap;">
        <button onclick="tapConfirm('setDbConfig')">配置数据库</button>
        <button onclick="tapConfirm('makeTable')">创建数据表</button>
        <button onclick="tapConfirm('addDb')">导入安全数据</button>
        <!-- <button onclick="tapConfirm('del')">清空数据</button> -->
        <button onclick="tapConfirm('delTable')">全部删除</button>
      </div>
      <div class="li tip" >
        提示：后台管理账号重置功能需要在完成数据表创建后才能使用。
      </div>
      <div class="li title" onclick="message.confirm('测试的','新内容',[{text:'确认',callback:callback}])">
        创建后台管理账号
      </div>
      <div class="ul" id="account">
          <div class="li">
            <label class="item">超级管理员用户名</label>
            <input  class="item" type="" name="username" value="{$data.user.username|default=''}">
          </div>
          <div class="li">
            <label class="item" >登陆密码</label>
            <input class="item" type="" name="password" value="{$data.user.password|default=''}">
          </div>
          <div class="li" style="justify-content: flex-end;">
            <button onclick="tapConfirm('makeAccount')">立即创建</button>
          </div>
      </div>
       <div class="li tip" >
        提示：创建完项目后，请修改public/install.php文件名后缀为install.php.bak,以防被人恶意修改。下次使用时候在手动修改回来即可。
      </div>
  </div>
</div>
</body>
<script type="text/javascript">
  var form;

 function tapConfirm(e) {

  var title ='';
  var url="{$data['model']['root']}/install/";
  switch(e){
    case 'delTable':
    title='本次操作仅删除框架本身的所有数据和数据表，删除后无法恢复,如果有重要数据请备份后在操作。';
    url+='delTable';
    break;
    case 'addDb':
    url+='addDb';
    title='为您导入用户接口安全防御数据,导入后后台入口只有超级管理员才能访问。如需开放部分接口，请登陆后台进行相关操作放权。';
    break;
    case 'setDbConfig':
     url+='setDbConfig';
    title='本次操作将会重新配置数据库地址/端口/库名/前缀名/用户名/密码相关信息。配置后立即生效。';
    break;
    case 'makeTable':
     url+='makeTable';
    title='创建数据表前，请确认您之前没有创建过相关表，如果创建过，无法再次创建，或者先删除然后在创建';
    break;
    case 'makeAccount':
     url+='makeAccount';
    title='新创建后台超级管理员账号,原账号并不会删除,这个账号拥有后台全部权限,创建完成后请登陆后台修改密码。';
    break;
    default:
    break;
  }
form={"url":url,"title":title,"type":e};

var send=function(e){
          var input;
          if(form.type=='makeAccount'){
            input=document.getElementById('account').getElementsByTagName('input');
          }else{
            input=document.getElementById('db').getElementsByTagName('input');
          }

         var formData={};
         // var urlData='';
         for (var i = 0;i<input.length; i++) {
          // urlData+=[input[i].name]+'='+input[i].value+'&';
          formData[input[i].name]=input[i].value;
         }
         formData['model']="{$data['model']['model']}";
         // console.log( formData);
         masking.open();
         Ajax.post(form.url,formData,{success(e){
          console.log(formData)
          // alert('操作成功');
         },fail(e){
          message.confirm('提示','操作失败');
          // alert('操作失败');
          console.log('失败')
         },complete(e){
          masking.close();
          console.log(e)
          // showMasking('loading')
         }},'json')
}
message.confirm('提示',title,[{text:'确认',callback:send}])
}
var Ajax={
     request(url,Obj){
  // url String  是   开发者服务器接口地址  
  // data  Object/ArrayBuffer 否   请求的参数 
  // header  Object  否   设置请求的 header，header 中不能设置 Referer。  
  // method  String  否 GET 有效值详见下方说明 
  // dataType  String  否 json  如果设为 json，会尝试对返回的数据做一次 JSON.parse 
  // responseType  String  否 text  设置响应的数据类型。合法值：text、arraybuffer  支付宝小程序不支持
  // success Function  否   收到开发者服务成功返回的回调函数  
  // fail  Function  否   接口调用失败的回调函数 
  // complete  Function  否   接口调用结束的回调函数（调用成功、失败都会执行）   
    Obj.method=Obj.method|| "GET";
    Obj.data=Obj.data||"";
    Obj.header=Obj.header|| {"Content-Type":"application/x-www-form-urlencoded"};
    Obj.complete=Obj.complete||'';
    Obj.success=Obj.success||'';
    Obj.fail=Obj.fail||'';
    Obj.dataType=Obj.dataType||'text';
    var that=this;
    var xhr = new XMLHttpRequest();
    xhr.open(Obj.method, url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    for (var i in Obj.header) {
      // Obj.header[i]
      xhr.setRequestHeader(i, Obj.header[i]); 
    } 
    // 添加http头，发送信息至服务器时内容编码类型 json
    xhr.setRequestHeader("Content-Type", "text/json");
    xhr.onreadystatechange = function() {
      that.handle({complete:Obj.complete,success:Obj.success,fail:Obj.fail},xhr);
    };
    xhr.send(JSON.stringify(Obj.data));
   },
  handle(fn,xhr,requestObj={}){
    // readyState == 4说明请求已完成  // 从服务器获得数据 
    if (xhr.readyState == 4){
      var  responseText=xhr.responseText;
        if (requestObj.dataType && requestObj.dataType=='json') {
          try{
            responseText=JSON.parse(xhr.responseText);
            // console.log(typeof responseText)
          }catch(e){
            responseText=xhr.responseText;
            // console.log('转json失败')
          }
        }
        var data={xhr:xhr,request:requestObj,data:responseText};
         if (typeof fn=='object') {
              if ((xhr.status == 200 || xhr.status == 304) && typeof fn.success=='function') {
                fn.success.call(this, data);
              }else if(typeof fn.fail=='function'){
                fn.fail.call(this, data);
              }
              if (typeof fn.complete=='function') {
                fn.complete.call(this,data);
              }
              
      }else if(typeof fn=='function'){
         // console.log(typeof fn);
        fn.call(this,data);
      }
    }
  },
  get(url, fn={success:function(){},fail:function(){},complete:function(){}},dataType='text') {
    var that=this;
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      that.handle(fn,xhr,{dataType:dataType});
    };
    xhr.send();
  },
  // data为object
  post(url, data, fn,dataType='text'){
    var that=this;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "text/json");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      that.handle(fn,xhr,{dataType:dataType});
    };
    xhr.send(JSON.stringify(data));
  }
}

</script>
</html>